<!DOCTYPE html>
<html lang="en">
<head>
	<title>Integrated Case Management System</title>
	<!-- CSS link goes here -->
	<!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
	<link rel="stylesheet" href="css/globle.css">
	<link rel="stylesheet" href="css/decoration.css">
	<link rel="stylesheet" href="jquery-ui-1.10.3.flick/css/flick/jquery-ui-1.10.3.custom.css">
	<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.3.0/pure-min.css">
	<!-- JS file goes here -->
	<!-- Bootstrap -->
	<script src="js/bootstrap.min.js"></script>
	<script src="jquery-ui-1.10.3.flick/js/jquery-1.9.1.js"></script>
	<script src="jquery-ui-1.10.3.flick/js/jquery-ui-1.10.3.custom.min.js"></script>
	<script src="js/JavaScript.js" ></script>
	<script src="js/prePopulateText.js" ></script>
	<script src="js/jsButton.js" ></script>

	<script>
		jQuery(document).ready(function() {
			$('#lastUpdateDate').html(today);
		});

		$(function() {
			//datepicker
			$( ".datepicker" ).datepicker({
				showOn: "both",
				buttonImage: "images/icon_calendar.png",
				buttonImageOnly: true,
				firstDay: 1,
				dateFormat: "d-M-yy",
				defaultDate: 0
			}).attr('readonly','readonly');
			//accordion
			$( ".accordion" ).accordion({
				header: "h2",
				collapsible: true
			});
		});

		
	</script>

</head>
<body>
	<div id="clearScripts" class="prePopu" onclick="clearScripts()">
		
	</div>
	
	<div class="container-fluid center">
	<header class="row-fluid">
		<img class="bannerMenu" src="images/Header-create.png" alt="" ></img>
		<map id="backtoinbox" name="backtoinbox">
            <area alt="inbox" id="area-inbox" shape="rect" coords="8,144,115,190" href="inbox-all-cases.html" />
        </map>
		<h1 onclick="textScripts()">Create New Case</h1>
	</header>
		<!-- <div class="row"> -->
		<hr class="thickLine">
		<div class="row-fluid">
			<div class="span6">
				<div class="row-fluid">	
					<div class="span2">Case ID</div>
					<div class="span4">2013100111440-6958H</div>
				</div>
			</div>
			<div class="span6">
				<label for="caseStatus" class="span2">Case Status</label>
				<div class="span4">
					<select name="caseStatus" id="caseStatus">
						<option value="Complaint">Complaint</option>
						<option value="Urgent">Urgent</option>
						<option value="Appeal">Appeal</option>
					</select>
				</div>
			</div>
		</div>
			<div class="formModule">
				<label>Incident Date</label>
				<div class="inputs">
					<input type="text" class="datepicker" id="fbDate" >
				</div>
			</div>
			<div class="formModule">
				<label>Received Date</label>
				<div class="inputs">
					<input type="text" class="datepicker" id="recDate">
				</div>
			</div>
			<div class="formModule clearfix">
				<label>Due Date</label>
				<div class="inputs" >
					<input type="text" class="datepicker" id="dueDate">
				</div>
			</div>
			<div class="clear"></div>
		

		<div class="formContainer content">
			<h2>Case Detail<hr class="slimLine"></h2>
			<div class="clearfix">
				<div class="formModule">
					<label for="sbjTitle">Subject Title</label>
					<div class="inputs" >
						<input type="text" id="sbjTitle" style="width:100%;" >
					</div>
				</div>
				<div class="clear"></div>
				<div class="formModule">
					<label for="caseStatus">Feedback Type</label>
					<div class="inputs">
						<select name="caseStatus" id="caseStatus">
							<option value="Open">Open</option>
							<option value="Closed">Closed</option>
							<option value="Pending">Pending</option>
						</select>
					</div>
				</div>
				<div class="clear"></div>
				<div class="formModule">
					<label for="caseDesc">Case Description</label>
					<div class="inputs" >
						<textarea name="caseDesc" id="caseDesc" style="width: 670px;height: 100px;" placeholder="Enter case description here..."></textarea>
					</div>
				</div>
				<div class="clear"></div>
				
				<div class="formModule">
					<label>Agency</label>
					<div class="inputs" >
						<select id="autoComp-agency">
							<option value="AVA">AVA</option>
							<option value="HDB">HDB </option>
							<option value="LTA">LTA</option>
							<option value="NEA">NEA</option>
							<option value="NPARKS">NPARKS</option>
							<option value="PUB">PUB</option>
							<option value="SPF">SPF</option>
						</select>
					</div>
				</div>

				<!-- START: Text Analytic Widget (button and bars) -->
				<div class="formModule">
					<label for="suggestAgency">Suggested Agency</label>
					<div class="inputs">
						<button type="submit" class="pure-button pure-button-primary">Analyze Description <img id="loading" src="images/ajax-loader(1).gif" style="float: left;" hidden="true"></button>
					</div>
					<div style="clear: both;"></div>
					<div id="progressBarsDiv" style="width:300px; height:120px; color: #666; font-family: Calibri; font-size: 14px; text-align: left;">
						Probability:
						<div style="margin-top:5px;" >
							<span style="width: 30px; float: left;">LTA</span>
							<div class="progressBar" id="progressBar1">
								<div></div>
							</div>
						</div>
						<div style="clear: both;"></div>
						<div>
							<span style="width: 30px; float: left; ">NEA</span>
							<div class="progressBar" id="progressBar2">
								<div></div>
							</div>
						</div>
						<div style="clear: both;"></div>
						<div>
							<span style="width: 30px; float: left; ">PUB</span>
							<div class="progressBar" id="progressBar3">
								<div></div>
							</div>
						</div>
						<div style="clear: both;"></div>
						<p style="color: #666; font-family: Calibri; font-size: 14px; text-align: left; margin:0px;">This case most likely belongs to: <span id="recomAgency" style="color:#0D8EFC;font-weight:600"></span></p>
					</div>
				</div>
				<!-- END: Text Analytic Widget (button and bars) -->
				<div class="formModule">
					<label for="autoComp">Category Search</label>
					<div class="inputs">
						<!-- input for Category keywords. MUST USE 'autoComp' because the id in js is that -->
						<input type="text" id="autoComp" placeholder="Enter keyword to search categories..." style="width:100%;" >
					</div>
				</div>
				<div class="clear"></div>
				<div class="formModule">
					<label>Category</label>
					<div class="inputs">
						<span id="autoComp-category" class="autoCome"></span>
					</div>
				</div>
				<div class="formModule">
					<label>Sub Category</label>
					<div class="inputs">
						<span id="autoComp-subCate" class="autoCome"></span>
					</div>
				</div>
				<div class="formModule">
					<label for="address">Address</label>
					<div class="inputs">
						<textarea name="address" id="address" style="width: 200px;height: 100px;"></textarea>
					</div>
				</div>
				<div class="formModule">
					<label for="postal">Postal Cade</label>
					<div class="inputs">
						<input name="postal" id="postal"></input>

					</div>
					
				</div>
				<div class="clear"></div>
				<div class="formModule">
					<label for="postal">Last Update Date</label>
					<div class="inputs">
						<span id="lastUpdateDate"></span>
					</div>
				</div>
				<div class="formModule">
					<label for="postal">Last Update Agency</label>
					<div class="inputs">
						<span id="lastUpdateAgency">??NEA??</span>
					</div>
				</div>
				<div class="formModule">
					<label for="postal">Last Action</label>
					<div class="inputs">
						<span id="lastUpdateAgency">Case is created by ??NEA??</span>
					</div>
				</div>
			</div>
		</div>

		<div class="formContainer content">
			<h2>Customer information<hr class="slimLine"></h2>
			<div class="clearfix">
				<div class="formModule">
					<label for="custName">Customer Name</label>
					<div class="inputs" >
						<input type="text" id="custName">
					</div>
				</div>
				<div class="formModule">
					<label for="phone">Phone</label>
					<div class="inputs" >
						<input type="text" id="phone">
					</div>
				</div>
				<div class="formModule">
					<label for="email">Email</label>
					<div class="inputs" >
						<input type="text" id="email">
					</div>
				</div>
			</div>
		</div>
		
		<!--Child case part-->
		<div id="childCasesPart" class="formContainer content">
				<h2>Child Cases</h2>
			<div id="childCaseTableWrap">
				<table id="childCaseTable" class="childTable">
					<thead>
						<tr>
							<th>Child Case ID</th>
							<th>Subject Title</th>
							<th>Category</th>
							<th>Case Status</th>
							<th>Routing Date</th>
							<th>Due Date</th>
							<th>Agency</th>
						</tr>
					</thead>
					<tbody>
						<!--child cases are added in here-->
					</tbody>
				</table>
			</div>
		</div>

		<!-- joint agencies part-->
		<div id="jointAgencyPart">
			<div class="subTitle">
				<span>Agencies Involved</span>
			</div>
			<div id="jointAgencyTableWrap">
				<table id="jointAgencyTable" class="childTable">
					<thead>
						<tr>
							<th>Agency Name</th>
							<th>Lead Agency</th>
							<th>Status</th>
						</tr>
					</thead>
					<tbody>
						<!--child cases go here-->
					</tbody>
				</table>
			</div>
		</div>
		<!-- buttons -->
		<div class="formContainer content">
			<div style="height:50px;"></div>
			<div class="bottomBtns">			
				<a href="#" class="pure-button pure-button-secondary">More Options</a>
				<a href="#" class="pure-button pure-button-primary">Accept</a>
			</div>
			
		</div>

	</div>

	<footer>
		<div style="height:100px;"></div>
		<img src="images/footer.png" />
	</footer>

</body>
</html>